<template>
	<div>
		<breadcrumb></breadcrumb>
		<!-- 列表 -->
		<div class="main">
			<div class="main_head">
			</div>
			<div class="list">
				<el-table :data="resultDate" style="width: 100%" header-align="left">
					<el-table-column align="left" prop="SerialNumber" width="80" label="序号">
						<template slot-scope="scope">
							<div class="switchBox">
								{{ (pageCurrent-1) * data.size + 1 + scope.$index }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="transSeqNo" label="流水号"></el-table-column>
					<el-table-column align="left" prop="amount" label="金额"></el-table-column>
					<el-table-column align="left" prop="payeeMemberName" label="司机"></el-table-column>
					<el-table-column align="left" prop="createDate" label="时间">
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="paginationBox">
				<el-pagination @current-change="changePages($event)" class="pagination" background
					layout="slot,prev, pager, next" :current-page.sync="pageCurrent" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5">
					<template slot>
						<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">
							共{{ data.total }}条,每页{{ data.size }}条
						</span>
					</template>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import breadcrumb from "@/components/breadcrumb";
	import httpApi from "@/http";

	export default {
		data() {
			return {
				resultDate: [],
				pageCurrent: 0,
				data: {
					total: 0,
					size: 10,

				}
			};
		},
		methods: {
			changePages(val) {
				//页码变化时
				this.pageCurrent = val;
				this.init(val);
			},
			init(val) {
				this.pageCurrent = val;
				let params = {
					pageIndex: val,
					pageSize: 10,
					isSuccess: 1,
					businessType: 91
				};
				// //console.log("参数", params);
				httpApi.orderApi.queryPageWalletIndex(params).then((res) => {
					var date = res.data.data.data;
					this.data.total = date.pageInfo.totalSize;
					this.resultDate = res.data.data.data.resultList;
					this.resultDate.forEach((item, i) => {
						let time = item.createDate * 1
						item.createDate = this.formatting(time)
					})
					this.resultDate = JSON.parse(JSON.stringify(this.resultDate))
				});
			},
			formatting(e) {
				var time = new Date(e);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y + '-' + (m<10?'0'+m:m) + '-' + (d<10?'0'+d:d) + ' ' +(h<10?'0'+h:h) + ':' + (mm<10?'0'+mm:mm) +
					':' + (s<10?'0'+s:s)
			},
		},
		mounted() {
			this.init(this.pageCurrent);
		},
		components: {
		  breadcrumb,
		},
	};
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: calc(100vh - 127px);
		background-color: #fff;
		padding: 0px 30px 0px 30px;

		.main_head {
			display: flex;
			justify-content: space-between;
			height: 64px;
			align-items: center;

			.main_head_left {
				font-size: 12px;
				color: #262626;
			}

			.main_head_right {
				.addCargoOwner {
					background-color: #1890ff;
					border-radius: 4px;
					height: 32px;
					color: #ffffff;
					font-size: 12px;
					padding: 8px 17px 9px 17px;
					transition: 0.2s;
					cursor: pointer;
					margin-right: 17px;

					.iconBtn {
						margin-right: 7px;
						font-size: 12px;
					}

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}

		.list {
			height: calc(100% - 112px);

			.switchBox {
				display: flex;
				align-items: center;

				.rightText {
					font-size: 12px;
					color: #595959;
				}
			}

			::v-deep .el-table__body-wrapper {
				height: calc(100vh - 414px);
				overflow-y: scroll;
			}

			// 表头样式
			::v-deep .el-table__header th {
				background-color: #f0f6fd;
				color: #262626;
				font-size: 12px;
				font-weight: bold;
				height: 48px;
				padding: 0;
				text-align: left;

				// 表 body的td
				::v-deep .el-table__body td {
					color: #595959;
					font-size: 12px;
				}
			}

			.stateBtns {
				height: 30px;

				::v-deep .el-button {
					font-size: 12px;
					border: none;
					width: 76px;
					height: 30px;
					margin: 0 auto;
					box-sizing: border-box;
				}

				.icon-dian {
					font-size: 12px;
				}

				.Pass {
					background-color: #ecf5fe;
					color: #1890ff;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10px 10px 9px;
				}

				.noPass {
					background-color: #fde8e9;
					color: #f7555d;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.dialog {

		// 标题
		::v-deep .el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
			padding: 15px 20px;
			color: #262626;
			font-size: 14px;
			font-weight: bold;
			height: 50px;
		}

		::v-deep .el-dialog__title {
			font-size: 14px;
			color: #303133;
			font-weight: bold;
		}

		//关闭图标
		::v-deep .el-dialog__headerbtn .el-dialog__close {
			font-size: 15px;
		}

		::v-deep .el-dialog__body {
			padding: 25px 64px 82px;
		}

		//   表格
		::v-deep .el-form-item__label {
			line-height: 32px;
			font-size: 12px;
			color: #262626;
			padding-top: 4px;
			width: 100%;
		}

		::v-deep .el-input__inner {
			line-height: 32px;
			height: 32px;
			padding: 0 10px;
		}

		.cancelBtn {
			width: 80px;
			height: 36px;
			border: 1px solid #d9d9d9;
			color: #262626;
			font-size: 12px;
			border-radius: 4px;
			background-color: #fff;
		}

		.submitBtn {
			background-color: #1890ff;
			width: 80px;
			height: 36px;
			color: #fff;
			border-radius: 4px;
			font-size: 12px;
		}

		.inputSelect_left {
			height: 32px;

			::v-deep .el-input__inner {
				border-radius: 4px 0px 0px 4px;
			}
		}

		.inputSelect_right {
			height: 32px;

			::v-deep .el-input__inner {
				border-radius: 0px 4px 4px 0px;
				border-left: none;
				background-color: #f5f7fa;
				font-size: 12px;
				color: #606266;
			}
		}

		::v-deep .el-input__icon {
			line-height: 0;
		}

		::v-deep .el-form-item__content {
			line-height: 0;
		}

		.notes ::v-deep .el-textarea .el-input__count {
			bottom: 15px;
			color: #c0c4cc;
		}
	}

	.paginationBox {
		width: 100%;
		background-color: #fff;
		display: flex;
		height: 48px;
		align-items: center;

		.pagination {
			margin-left: auto;
		}
	}
</style>